<template>
  <div>
    <!-- 登陆界面头部 -->
    <van-nav-bar
      title=""
      left-text=""
      right-text="密码登录"
      left-arrow
      @click-left="onClickLeft"
    />
  </div>
  <!-- 手机号登录部分 -->
  <div class="tel-login">
    <p>手机号登录</p>
  </div>
  <!-- 登录表单 ,加上表单验证-->
  <div>
    <van-form @submit="onLogin">
      <van-field
        v-model="state.mobile"
        label="手机号:"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请填写手机号码' },
          { pattern, message: '请输入正确手机格式' },
        ]"
      />

      <van-field
        @touchstart.stop="show = true"
        v-model="state.code"
        clearable
        label="验证码:"
        placeholder="请输入验证码"
        :rules="[
          { required: true, message: '请输入验证码' },
          { patterncode, message: '验证码格式错误' },
        ]"
      >
        <template #button>
          <van-count-down
            :time="time"
            format=" ss s"
            v-if="countTimeshow"
            @finish="countTimeshow = false"
          />
          <van-button
            size="small"
            round
            @click="getcode"
            v-else
            :loading="loadingshow"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <!-- 输入验证号，调入手机键盘 -->
      <van-number-keyboard
        v-model="state.code"
        :maxlength="11"
        :show="show"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
      <div class="login-btn-container">
        <van-button
          type="primary"
          block
          color="#FCD821"
          round
          class="login-btn"
          native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reactive, ref } from "vue";
import { getloginApi, getmineApi } from "../utils/api";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  setup() {
    const state = reactive({
      mobile: "",
      code: "",
    });
    const router = useRouter();

    // 控制倒计时和发送验证码按钮显示状态
    let countTimeshow = ref(false);
    // 倒计时事件
    const time = ref(60 * 1000);
    // 验证码参数
    const templateId = "537707";
    // 手机号码表单验证
    const pattern = /^1[3|4|5|6|7|8|9]\d{9}$/;
    // 验证码表单验证
    const patterncode = /\d{4}/;
    // 获取短信验证码
    //发送验证码点击一次设置为加载状态
    let loadingshow = ref(false);
    const store = useStore();
    const getcode = function () {
      getloginApi({
        phone: state.mobile,
        templateId: "537707",
      });
      // 点击发送验证码之后显示倒计时
      countTimeshow.value = true;
      loadingshow.value = true;
    };
    // 弹出键盘部分
    const show = ref(false);
    const onInput = (value) => Toast(value);
    const onDelete = () => Toast("删除");
    // 获取个人信息部分，此处可以拿到token值
    const onLogin = async function () {
      Toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 0,
      });
      try {
        console.log(1);
        const res = await getmineApi({
          phone: state.mobile,
          code: state.code,
        });
        console.log(res);
        Toast.success("登录成功");
        // 登录成功之后拿到数据，并进入到我的页
        router.push("/home/mine");
        store.commit("changeuser", res.result.token);
        console.log(res.result.token);
      } catch (err) {
        Toast.fail("登录失败,手机或验证码错误");
        console.log(2);
      }
    };
    //左箭头回退
    const onClickLeft = () => {
      router.go(-1);
    };
    return {
      onClickLeft,
      state,
      pattern,
      patterncode,
      templateId,
      getcode,
      onLogin,
      show,
      onInput,
      onDelete,
      store,
      time,
      countTimeshow,
      loadingshow,
    };
  },
};
</script>

<style lang="less" scoped>
/* 头部样式 */
/deep/.van-nav-bar__text {
  color: #000;
}
/deep/.van-nav-bar .van-icon {
  color: #000;
}
/* 手机号登录样式 */
.tel-login {
  display: flex;
  height: 76px;
  align-items: center;
  font-weight: 700;
  p {
    text-indent: 15px;
  }
}
.login-btn-container {
  padding: 15px;
  .login-btn {
    border: none;
  }
}
/deep/.van-button__text {
  font-size: 16px;
  color: #000;
}
</style>
